<template>
  <div class="container">
      <div class="card">
          <div class="card-header">资产数据概览</div>
          <div class="card-body">
              <dataPanel></dataPanel>
          </div>
      </div>
      <div class="card clearfix">
          <div class="classfy-tree" :style="{ height: cardBodyHeight + 'px' }">
              <div class="card-header">资产分类 :</div>
              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          <div class="classfy-data" ref="tabBody">
              <div class="card-header">
                  <h2 class="e_inner_text f-left">分类详细信息 :</h2>
                  <div class="f-right">
                      <el-button type="warning" icon="el-icon-download" @click="toNewUser">导出数据</el-button>
                  </div>
              </div>
              <el-table :data="tableData">
                  <el-table-column prop="data1" label="在库">
                  </el-table-column>
                  <el-table-column prop="data2" label="维修">
                  </el-table-column>
                  <el-table-column prop="data3" label="调拨">
                  </el-table-column>
                  <el-table-column prop="data4" label="报废">
                  </el-table-column>
                  <el-table-column prop="data5" label="借出">
                  </el-table-column>
                  <el-table-column prop="data6" label="待入库">
                  </el-table-column>
                  <el-table-column prop="data7" label="绝密">
                  </el-table-column>
                  <el-table-column prop="data8" label="机密">
                  </el-table-column>
                  <el-table-column prop="data9" label="秘密">
                  </el-table-column>
                  <el-table-column prop="data10" label="合计">
                  </el-table-column>
              </el-table>
          </div>
      </div>
  </div>
</template>

<script>
import dataPanel from "@/components/DataPanel"
export default {
  name: "DataStatistics",
  components: {
    dataPanel
  },
  data() {
    return {
      tableData: [
        {
          data1: 1,
          data2: 2,
          data3: 54,
          data4: 3,
          data5: 1,
          data6: 0,
          data7: 23,
          data8: 4,
          data9: 23,
          data10: 1
        }
      ],
      data: [
        {
          treeId: 1,
          label: "信息系统",
          children: [
            {
              treeId: 10101,
              label: "计算机终端"
            },
            {
              treeId: 10102,
              label: "服务器"
            },
            {
              treeId: 10104,
              label: "堡垒机"
            },
            {
              treeId: 10105,
              label: "便携计算机"
            }
          ]
        },
        {
          treeId: 2,
          label: "网络设备",
          children: [
            {
              treeId: 201,
              label: "交换器"
            },
            {
              treeId: 202,
              label: "路由器"
            },
            {
              treeId: 202,
              label: "防火墙"
            },
            {
              treeId: 202,
              label: "网管工具"
            },
            {
              treeId: 202,
              label: "数码相机"
            },
            {
              treeId: 202,
              label: "多功能一体机"
            }
          ]
        },
        {
          treeId: 3,
          label: "储存设备",
          children: [
            {
              treeId: 301,
              label: "硬盘"
            },
            {
              treeId: 302,
              label: "SSD硬盘"
            },
            {
              treeId: 302,
              label: "记忆棒"
            },
            {
              treeId: 302,
              label: "录音带"
            },
            {
              treeId: 302,
              label: "录像带"
            },
            {
              treeId: 302,
              label: "SD存储卡"
            }
          ]
        },
        {
          treeId: 4,
          label: "安全密保产品",
          children: [
            {
              treeId: 301,
              label: "密码产品"
            },
            {
              treeId: 302,
              label: "计算机病毒防止卡"
            },
            {
              treeId: 302,
              label: "安全审计"
            },
            {
              treeId: 302,
              label: "检测工具"
            },
            {
              treeId: 302,
              label: "储存保护"
            },
            {
              treeId: 302,
              label: "信息消除"
            },
            {
              treeId: 302,
              label: "入侵检测"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label",
        treeId: ""
      }
    };
  },
  computed: {
    cardBodyHeight: function() {
      let boxHeight = window.innerHeight - 282;
      return boxHeight;
    }
  }
};
</script>

<style lang="less" scoped>
.admin-fluid {
  .backlog-body {
    display: block;
    padding: 10px 15px;
    color: #999;
    border-radius: 3px;
    transition: all 0.3s;
    p {
      margin-top: 0;
      cite {
        font-style: normal;
        font-size: 30px;
        font-weight: 300;
        color: #fff;
      }
    }
    h3 {
      color: #fff;
      margin-top: 1rem;
      margin-bottom: 0;
    }
  }
  a.backlog-body:hover {
    transition: ease-in 0.1s;
    transform: scale(1.1);
  }
  .card-body .el-col:nth-child(1) .backlog-body {
    background-image: linear-gradient(
      0deg,
      rgb(91, 187, 241) 0%,
      rgb(108, 198, 242) 100%
    );
  }
  .card-body .el-col:nth-child(2) .backlog-body {
    background-image: linear-gradient(
      0deg,
      rgb(117, 193, 131) 0%,
      rgb(134, 216, 149) 100%
    );
  }
  .card-body .el-col:nth-child(3) .backlog-body {
    background-image: linear-gradient(
      0deg,
      rgb(242, 124, 109) 0%,
      rgb(251, 144, 132) 100%
    );
  }
  .card-body .el-col:nth-child(4) .backlog-body {
    background-image: linear-gradient(
      0deg,
      rgb(249, 160, 65) 0%,
      rgb(255, 177, 94) 100%
    );
  }
  .card-body .el-col:nth-child(5) .backlog-body {
    background-image: linear-gradient(
      0deg,
      rgb(233, 120, 172) 0%,
      rgb(247, 140, 189) 100%
    );
  }
  .card-body .el-col:nth-child(6) .backlog-body {
    background-image: linear-gradient(
      0deg,
      rgb(164, 100, 185) 0%,
      rgb(193, 114, 219) 100%
    );
  }
}

.classfy-tree {
  width: 220px;
  float: left;
  position: relative;
  z-index: 1;
  background: #f9fafc;
  border-right: 1px solid #ebeef5;
  .card-header {
    border-bottom: 1px solid #e4e6e9;
  }
  .el-tree {
    padding: 10px;
    background: transparent !important;
  }
}
.classfy-data {
  padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}
</style>